
import { Checkbox, Picker } from 'antd-mobile';
import { useEffect, useState } from 'react';
import { IData } from '../api/activity/fielddata.api';

export default function Set(
	{
		no,
		data,
		onUpdate,
		onDel
	}: {
		no: number,
		data: IData,
		onUpdate(v: IData): void,
		onDel(): void
	}) {
	//文本值
	const [d, setData] = useState(data);
	const [visible, setVisible] = useState(false);
	const [value, setValue] = useState<string[]>([]);
	return <>
		<div className='v'>
			<div className='topv'>
				<div className='left'>
					<span className='num'>{no}</span>
				</div>
				<div className='right'>
					<div className='lblv'>
						<span className='lbl'>名称：</span>
						<div className='inpv'>
							<input readOnly={data.itemtype === 1} className='inp' value={d.name} type='text' onChange={(e) => {
								const f = {
									id: d.id,
									did: d.did,
									name: e.target.value,
									type: d.type,
									alternative: d.alternative,
									isrequired: d.isrequired,
									itemtype: d.itemtype
								} as IData;
								setData(f);
								onUpdate(f);
							}} />
						</div>
					</div>
					<div className='lblv'>
						<span className='lbl'>类型：</span>
						<div className='inpv' onClick={() => {
							if (data.itemtype === 2) {
								setVisible(true);
							}
						}} >
							<input readOnly className='inp' value={GetType(data.type)} />
							<img className='img1' src='/images/down.png' />
							<Picker
								columns={[['文字', '数字', '日期', '选择列表', '文件/图片上传']]}
								visible={visible}
								onClose={() => {
									setVisible(false);
								}}
								value={value}
								onConfirm={v => {
									setValue(v);
									const f = {
										id: d.id,
										did: d.did,
										name: d.name,
										type: GetTypeValue(v[0]),
										alternative: d.alternative,
										isrequired: d.isrequired,
										itemtype: d.itemtype
									} as IData;
									setData(f);
									onUpdate(f);
								}}
							/>
						</div>
					</div>
					<div className={d.type === 4 ? 'lblv1' : 'un'}>
						<span className='lbl'>请输入备选项（以逗号隔开）：</span>
						<div className='inpv'>
							<input readOnly={data.itemtype === 1} className='inp' value={d.alternative} type='text' onChange={(e) => {
								const f = {
									id: d.id,
									did: d.did,
									name: d.name,
									type: d.type,
									alternative: e.target.value,
									isrequired: d.isrequired,
									itemtype: d.itemtype
								} as IData;
								setData(f);
								onUpdate(f);
							}} />
						</div>
					</div>
				</div>
			</div>
			<div className='btnv'>
				<Checkbox style={{
					'--icon-size': '1rem',
					'--font-size': '0.875rem'
				}} onChange={(e) => {
					const f = {
						id: d.id,
						did: d.did,
						name: d.name,
						type: d.type,
						alternative: d.alternative,
						isrequired: Number(e),
						itemtype: d.itemtype,
					} as IData;
					setData(f);
					onUpdate(f);
				}}>是否必填</Checkbox>
				<div className='del' onClick={onDel}>
					<img className='img' src='/images/del.png' />
				</div>
			</div>
		</div>
		<style jsx>{`
		.v{
display: flex;
flex-direction: column;
justify-content:center;
height:9rem;
border-color: #000000;
border-style: solid;
border-width: 0.0625rem;
 border-radius: 0.625rem;
margin: 0.5rem;
padding: 0.5rem 1rem 0rem 1rem;
}
	.topv{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.left{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 0;
background-color: #000000;
width: 1.5625rem;
 height: 1.5625rem;
 border-radius: 3.125rem;
}
.num{
color: #FFFFFF;
font-size: 1rem;
}
.right{
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
margin-left: 1rem;
}
.lblv{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-grow: 1;
}
.lbl{
font-size: 0.875rem;
color: #505D68;
text-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}
.inpv{
display: flex;
flex-direction: row;
align-items: center;
margin: 0.2rem 0;
flex-grow: 1;
border-color: #D9D9D9;
border-width: 0.0625rem;
border-style: solid;
}
.inp{
flex-grow: 1;
border-style: none;
font-size: 0.875rem;
color: #000000; 
}

.lblv1{
display: flex;
flex-direction: column;
justify-content: flex-start;
flex-grow: 1;
}
.un{
display: none;
}

.btnv{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
margin-top: -0.5rem;
}
.del{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 3rem;
height: 3rem;
}
.img{
height: 1.25rem;
 width: 1.125rem;
}
.img1{
width: 0.875rem;
 height: 0.5rem;
margin-right: 0.5rem;
}
		`}</style>
	</>;
}

function GetType(type: number) {
	switch (type) {
		case 1:
		default:
			return '文字';
		case 2:
			return '数字';
		case 3:
			return '日期';
		case 4:
			return '选择列表';
		case 5:
			return '文件/图片上传';
	}
}

function GetTypeValue(type: string) {
	switch (type) {
		case '文字':
		default:
			return 1;
		case '数字':
			return 2;
		case '日期':
			return 3;
		case '选择列表':
			return 4;
		case '文件/图片上传':
			return 5;
	}
}
